<template>
    <!-- <div>
        <h1>首页</h1> 
    </div> -->
    <el-tabs v-model="data.activeTab" @tab-click="handleTabClick" type="card">
        <el-tab-pane v-for="(tab, index) in data.tabs" :key="index" :label="tab.label" :name="tab.name">
        {{ tab.content }}
        </el-tab-pane>
    </el-tabs>
</template>
<script setup lang="ts">  
    import { reactive,ref } from 'vue'  
    // console.log(123);
    // import { ElTabs, ElTabPane } from 'element-plus';  
    /* interface tab {

    } */
    const data = reactive<any>( { 
        activeTab: 'tab1',
        tabs: [
            { label: 'Tab 1', name: 'tab1', content: 'This is content of Tab 1' },
            { label: 'Tab 2', name: 'tab2', content: 'This is content of Tab 2' },
            { label: 'Tab 3', name: 'tab3', content: 'This is content of Tab 3' },
        ], 
    })

    function handleTabClick(tab) {
        data.activeTab = tab.name;
    }
    
</script>
<style lang="less" scoped >
    ::v-deep .el-tabs__item.is-active{
        background: #fff;
    }
</style>